<template>
  <el-card shadow="never" class="aui-card--fill">
    <div class="mod-sys__wsLog">
		
		<el-form  :model="dataForm" @keyup.enter.native="getDataList()">
			<div class="inlineItem" >
				<el-form-item>
					<el-input id="wsUrl2" style="width:620px;" size="mini" v-model="dataForm.wsUrl" placeholder="请输入ws地址" clearable></el-input>
				</el-form-item>

				<el-form-item>
					<el-button icon="el-icon-link" type="primary" size="mini" @click="initWs()">连接</el-button>
				</el-form-item>

				<el-form-item>
					<el-button icon="el-icon-close" type="danger" size="mini" @click="closeWs()">断开</el-button>
				</el-form-item>
				
				<el-form-item>
					<el-button icon="el-icon-refresh" type="warning" size="mini" @click="initWs()" title="点击刷新，重连当前WebSocket">重连</el-button>
				</el-form-item>
				
				<el-form-item>
					<el-button icon="el-icon-s-promotion" type="success" size="mini" @click="showSendBox()">发送</el-button>
				</el-form-item>
				
				<el-form-item style="margin-right: 50px;">
				</el-form-item>
				
				<el-form-item>
					<el-button type="primary" v-if="isTop" size="mini" @click="toTop(!isTop)">底部</el-button>
					<el-button type="primary" v-if="!isTop" size="mini" @click="toTop(!isTop)">顶部</el-button>
				</el-form-item>
				
				<el-form-item>
					<el-button type="primary" v-if="isHH" size="mini" @click="toHH(!isHH)">不换行</el-button>
					<el-button type="primary" v-if="!isHH" size="mini" @click="toHH(!isHH)">换行</el-button>
				</el-form-item>
				
				<el-form-item>
					<el-button type="success" size="mini" @click="cls('清空成功')">清空</el-button>
				</el-form-item>
				
				<el-form-item>
					<el-button type="success" size="mini" @click="doCopy()">复制</el-button>
				</el-form-item>
				
				
				
			</div>
			
		</el-form>
		
		<div id="message"  >{{ dataForm.wst }}</div>
	  
    </div>
  </el-card>
</template>

<script>
import { copyText } from '@/utils'
import Cookies from 'js-cookie'
export default {
  data () {
    return {
	  socket: null,
	  isTop: false,
	  isHH: true,
	  showType: '',
      dataForm: {
        wsUrl: '',
		tempUrl: null,
		wst: ''
      }
    }
  },
  mounted() {
	  // this.checkChrome();
	   this.init()
  },
  components: {
  },
  methods:{
	init(){
		var t = window.SITE_CONFIG['apiURL']+'/websocket/logging/' + Cookies.get('token')
		if(  typeof(WebSocket) === "undefined"){
			this.cls( "<br/><br/>您的浏览器不支持WebSocket<br/><br/>") ;
		}else{
			this.cls( "<br/><br/>您的浏览器支持WebSocket,可以进行测试<br/><br/>") ;
		}
		this.dataForm.wsUrl = t.replace(/https/, "wss").replace(/http/, "ws")
	},
	initWs() {
		if(typeof(WebSocket) === "undefined"){
			alert("您的浏览器不支持socket")
		}else{
			if( this.socket != null ){
				this.cls("正在连接中,请耐心等待....<br/><br/>")
				this.changeWst("正在关闭上一个连接....<br/>")
				this.closeWs();
			}else{
				this.cls("正在连接中,请耐心等待....<br/><br/>")
			}
			
			
			// 实例化socket
			this.socket = new WebSocket(this.dataForm.wsUrl)
			// 监听socket连接
			this.socket.onopen = this.open
			// 监听socket错误信息
			this.socket.onerror = this.error
			// 监听socket消息
			this.socket.onmessage = this.getMessage
		}
	},
	changeWst(c){
		document.getElementById('message').innerHTML += c  +'<br/>';
		this.toTop(this.isTop)
	},
	cls(c){
		document.getElementById('message').innerHTML = ( c + '<br/>') ;
	},
	doCopy(){
		var context = this.dataForm.wsUrl
		copyText(context,true);
	},
	 showSendBox() {
		this.$prompt('请输入发送内容', '提示', {
		  confirmButtonText: '确定',
		  cancelButtonText: '取消',
		}).then(({ value }) => {
		  this.sendMsg(value);
		}).catch(() => {
		  this.$message({
			type: 'info',
			message: '取消输入'
		  });       
		});
	},
	toTop(ttttt){
		var ex = document.getElementById("message");
		ex.scrollTop = ttttt ? 0 :  ex.scrollHeight + 100; 
		this.isTop = ttttt
	},
	toHH(isHHH){
		isHHH ? message.style.setProperty('white-space','') : message.style.setProperty('white-space','nowrap');
		this.isHH = isHHH
	},
	
	
	// websocket方法
	open: function () {
		this.changeWst("<br/>WebSocket连接成功....<br/><br/>")
		this.$message.success('WebSocket连接成功');
	},
	error: function () {
		this.changeWst( "<span style='color: red;'>WebSocket连接发生错误："+ this.dataForm.wsUrl + '</span>' )
	},
	getMessage: function (msg) {
		this.changeWst( msg.data )
	},
	sendMsg: function (msgContent) {
		if( this.socket != null ){
			this.$message.success('发送成功');
			this.socket.send(msgContent)
		}else{
			this.$message.error('Websocket未连接');
		}
	},
	closeAfter: function () {
		this.changeWst( "<br/><span style='color: red;'>WebSocket连接关闭：" + this.dataForm.wsUrl +"</span><br/>")
		this.socket = null;
	},
	closeWs: function () {
		if( this.socket != null ){
			this.socket.close();
			this.closeAfter();
        }else{
			this.$message.error('Websocket未连接');
		}
	}
	//销毁监听任务
	,closeWs2: function () {
		if( this.socket != null ){
			this.socket.close();
			this.$message.success('Websocket连接已断开');
        }
	}
	
  }
  ,
  destroyed () {
	  // 销毁监听
	  // this.socket.onclose = this.closeAfter()
	  this.closeWs2();
  }
}
</script>


<style lang="scss">

.inlineItem {
	display: flex; 
	flex-wrap: nowrap; 
	justify-content: flex-start; 
	align-items: center; 
}

.inlineItem button{
	margin-left: 10px;
}

#message {
	font-size:13px;
	height: 80%;
	width: 97%;
	
	overflow-y:auto;
	position:absolute
}

</style>